javascript ESLint 理解ポイント
気になること
q.icon ESLintにはルールがどれくらい用意されてるの？
a.icon 公式（eslint）で用意されてるルールはそこまで多くないかもだが、カスタムルールを作れることから無限にあることが想像できる。プラグインの数も多い。
q.icon ESLintのコマンドで基本的に覚えておくといいのは何？
a.icon eslint --ext <files> <dir>だけ覚えておけばOK
その他ポイント
ESLintがやってることは「対象コードを読み取って、事前に設定されてるルールに反するものをレポートする」てだけ。
エディタのESLintプラグインを利用すれば、リアルタイムでESLintのルール違反を見つけることができるのでGood！
.eslintrcの内容を読み解く
hr.icon
env：
javascriptでよく利用されるグローバル変数のセットを選べる設定
こいつでグローバル変数のセットを選んでおくと、実際のコード内容でグローバル変数を利用してもESLintに怒られなくなる。
具体的に言うと、ESLintのrulesでno-undefというルールが有効になってる際に、グローバル変数の指定しておかないと怒られる。
このno-undefルールというのは、定義されてない変数が利用されてる時に検知するルールである。
グローバル変数を事前にESLintに知らせておかないと怒られる。
余談：TypeScriptを利用する場合は、指定ルールもちょと変わってくるっぽい。
自分はまだTypeScript使わないからわからん。
extends：
どっかで設定されてるプラグイン及びルールを継承して利用できる
一番よくextendsされてるのはeslint:recommendedやplugin:react/recommendedなどかと思われる
extendsで継承したら、その設定をそのまま利用できるので、細々した設定をしなくて良くて楽
ちなみにextendsの設定は下の方が設定が強い。下に行けば行くほど上の設定が上書きされる。
記述れい
plugin:プラグインの省略名/コンフィグ名
plugins：
pluginを指定することで、そのpluginで作られたルールを利用できるようになる。
例えば...nodeというpluginを指定すると、そのnodeというプラグインで作られたルールが利用できる。
後述するrulesという設定に追加できて利用可能になる。
逆にいうと、プラグインを追加しないとそのルールは利用できない。「Not Found！」と言われて怒られる。
注意.icon重要.icon pluginを有効にしたい場合は、事前にnpmかyarnでそのプラグインをインストールしておく必要がある。
parser：
基本的にESLintはJavascriptコードのパースに対応してるらしい。
TypeScriptに対応させたい場合は、この設定で変えるらしいよ。
parser: '@typescript-eslint/parser'
参考：
parseOpstion：
ESLintのデフォルトパーサーはECMAScript5 の構文で記述されたコードを想定してるらしい。
このESのバージョンを変更したい場合はecmaVersionで設定しないといけないんだって。
あと、JSXコードも見れるようにしたい場合も、ここで設定するんだって。
あと、EC Module（importの構文のやつ。別のjsファイルを読み込めるやつ）はデフォルトで見れるようになってないから、ここでsourceType: moduleとして設定しておく。
code: yml
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 2021 # same as 12
sourceType: module # use import/export
rules：
ここが物事の根幹ではあるのだが、基本的なルールはextendsで継承してしまうのが慣習。
extends元でrulesが設定されており、それを継承する形になる。
個別ルール・カスタムルールなどをここで設定するといい。
参考